<template>
	<div class="base-content">
		<el-date-picker v-model="date_ori" type="datetime" placeholder="选择一个时间">
		</el-date-picker>
		<el-select v-model="format_exp" placeholder="选择格式">
			<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
			</el-option>
		</el-select>
		<el-button @click="formatTZ">格式化</el-button>
		转换结果
		{{date_utc}}
	</div>
</template>

<script setup lang="ts">
	import {
		ref
	} from 'vue'
	import Moment from 'moment'
	import {
		copyText
	} from '@/utils/utils'

	const date_ori = ref(new Date()),
		date_utc = ref(''),
		format_exp = ref(''),
		options = [{
			value: '',
			label: 'UTC',
		}, {
			value: 'YYYY-MM-DD',
			label: 'YYYY-MM-DD',
		}, {
			value: 'YYYY-MM-DD HH:mm:ss',
			label: 'YYYY-MM-DD HH:mm:ss',
		}]

	const formatTZ = () => {
		date_utc.value = Moment(date_ori.value).format(format_exp.value)
		copyText(date_utc.value)
	}
</script>

<style>
</style>
